<template>
  <div>
    <button @click="delayCountClick">delayCount:{{ delayCount }}</button>
  </div>
</template>

<script setup>
import { ref, shallowRef, customRef, watch } from "vue";
const delayRef = function (value) {
  let timer;
  return customRef((track, trigger) => ({
    get() {
      // 收集依赖
      track();
      return value;
    },
    set(newValue) {
      console.log("设置新value111", newValue);
      value = newValue;
      clearTimeout(timer);
      timer = setTimeout(() => {
        console.log("设置新value222", newValue);
        trigger();
      }, 1000);
    },
  }));
};
const delayCount = delayRef(0);
const delayCountClick = () => {
  delayCount.value += 1;
};
</script>

<style scoped>
button {
  padding: 20px 20px;
  background-color: pink;
}
</style>
